<template>
  <div class="communityTree">
    <div class="topButton">
      区域选择
    </div>
    <el-tree
        ref="refTree"
        empty-text="暂无数据"
        :data="treeList"
        highlight-current
        :props="defaultProps"
        node-key="rangeId"
        :default-expanded-keys="expandedList"
        @node-expand="handleNodeExpand"
        @node-collapse="handleNodeCollapse"
        @node-click="handleNodeClick"/>
  </div>
</template>

<script>

let component;
export default {
  name: 'CommunityTree',
  data() {
    return {
      treeList:[],
      expandedList: [0],
      parentId: 0,
      defaultProps: {
        children: 'children',
        label: 'rangeName',
      },
      clickTarget:{},
    };
  },
  methods: {
    async selTreeList(request) {
      let response = await this.$asyncPost(request.route, {
        actionType: request.actionType
      });
      if (response.success) {
        //判断
        let data = response.dataList;
        if(data.length > 0 ){
          let allTreeTarget = {
            rangeId: 0,
            rangeName: response.domainName,
            children: data
          };
          component.treeList = [allTreeTarget];
          if(!component.clickTarget.rangeId) component.clickTarget = allTreeTarget
        }
        component.$nextTick(() => {
          component.$refs.refTree.setCurrentKey(component.clickTarget.rangeId);
          component.$emit('selTreeList', component.clickTarget);
        })

      } else {
        component.$message.error(response.message);
      }
    },
    // 树节点展开
    handleNodeExpand(data) {
      // 保存当前展开的节点
      let flag = false
      component.expandedList.some(item => {
        if (item === data.rangeId) { // 判断当前节点是否存在， 存在不做处理
          flag = true
          return true
        }
      })
      if (!flag) { // 不存在则存到数组里
        component.expandedList.push(data.rangeId)
      }
    },
// 树节点关闭
    handleNodeCollapse(data) {
      // 删除当前关闭的节点
      component.expandedList.some((item, i) => {
        if (item === data.rangeId) {
          component.expandedList.splice(i, 1)
        }
      })
      this.removeChildrenIds(data) // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    },
// 删除树子节点
    removeChildrenIds(data) {
      const ts = this
      if (data.children) {
        data.children.forEach(function (item) {
          const index = ts.expandedList.indexOf(item.rangeId)
          if (index > 0) {
            ts.expandedList.splice(index, 1)
          }
          ts.removeChildrenIds(item)
        })
      }
    },
    handleNodeClick(data){
      component.clickTarget = data;
      component.$emit('handleNodeClick', data)
    }
  },
  mounted() {
    component = this;
  }
}

</script>
<style lang='scss' scoped>
.communityTree {
  box-shadow: 3px 3px 17px #131928;
  background: #151617;
  height: 780px;
  border-radius: 5px;
  margin-right: 20px;
  /*  margin-top: 13px;*/
  /*height: 740px;
background: url('../../assets/treeBackground.png') 0 0 no-repeat #292a42;
background-size: 100% 970px;*/
}
</style>